<template>
  <div class="xq-form-wrapper">
    <div class="xq-form-search">
      <a-input-search allowClear v-model="postName" placeholder="职位名称" style="width: 200px" @search="onSearch" />
      <div style="text-align: right; margin-top: -32px">
        <a-space>
          <a-button
            type="primary"
            icon="plus"
            @click="
              addModalVisible = true;
              val = '';
            "
          >
            新建内推职位
          </a-button>
        </a-space>
      </div>
    </div>
    <a-spin :spinning="spinning" class="xq-form-content" style="margin-top: 24px">
      <XqTable
        :customize="FormJson['config']['table']['customize']"
        :scroll="{ x: columns.length * 150 }"
        :pagination="false"
        :dataSource="tableData"
        :columns="columns"
        :row-selection="
          FormJson['config']['table']['extend']['batch']
            ? {
                selectedRowKeys: selectedRowKeys,
                onChange: onSelectChange
              }
            : null
        "
        class="xq-form-content-table"
        @change="onTableChange"
      >
        <!-- 主要内容，表格，自定义 header -->
        <template v-for="(col, index) in columns" v-slot:[`xq_${col.dataIndex}`]>
          <span :key="index">
            {{ col.customTitle }}
          </span>
        </template>
        <!-- 主要内容，表格，自定义 td -->
        <!-- eslint-disable-next-line prettier/prettier -->
        <template v-for="(col, index) in columns" v-slot:[col.dataIndex]="text, record">
          <span v-if="col.dataIndex === 'gmtCreate'" :key="index">
            {{ moment(text).format("YYYY-MM-DD") }}
          </span>
          <span v-else-if="col.dataIndex === 'cityName'" :key="index">
            {{ text ? text.split(",")[1] : "" }}
          </span>
          <span v-else-if="col.dataIndex === 'empCompanyIds'" :key="index">
            <span v-if="record.empCompanyIds && record.empCompanyIds.length > 0">
              {{ record.empCompanyIds[0].name }}
              <span v-if="record.empCompanyIds.length > 1">等{{ record.empCompanyIds.length }}家公司</span>
            </span>
            <span v-else>暂无范围</span>
            <a class="ml8" @click="onEditScope(record)"><a-icon type="form"/></a>
          </span>
          <span v-else-if="col.dataIndex === 'tableAction'" :key="index">
            <a @click="onEdit(record)">编辑赏金规则</a>
            <a-divider type="vertical" />
            <a-popconfirm
              :title="`确认要${record.isEmp === 1 ? '关闭' : '打开'}吗？`"
              ok-text="确认"
              cancel-text="取消"
              @confirm="onClose(record.id, record.isEmp)"
            >
              <a>{{ record.isEmp === 1 ? "关闭" : "打开" }}</a>
            </a-popconfirm>
          </span>
          <XqTableCell v-else :key="index" :record="record" :field="FormJson['fields'][col.dataIndex]" :dynamicData="dynamicData" />
        </template>
      </XqTable>
      <div class="xq-form-content-pagination">
        <div class="xq-form-content-pagination-total">共 {{ total }} 条</div>
        <a-pagination
          v-model="pageNo"
          :page-size="pageSize"
          :total="total"
          :show-size-changer="true"
          :show-quick-jumper="true"
          :page-size-options="['10', '20', '50', '100']"
          @change="onPageChange"
          @showSizeChange="onPageSizeChange"
        />
      </div>
    </a-spin>
    <sets :visibleSet.sync="visibleSet" :selectedListTempString="selectedListTempString" @upDate="upDate" />
    <edit
      :visibleSet.sync="visibleEdit"
      :id="id"
      :val="val"
      :empRuleIsOpen="empRuleIsOpen"
      :empMoneyReward="empMoneyReward"
      @upDate="upDate"
    />
    <addModal :visible.sync="addModalVisible" @upDate="onGetFindPostByQuery" />
    <editScope :visible.sync="editScopeVisible" :id="id" :selectedList="selectedList" @upDate="onGetFindPostByQuery" />
  </div>
</template>

<script>
import FormJson from "./FormJson";
import XqCurdMixin from "xqjr-plugin-form/mixins/XqCurdMixin";
import { getFindPostByQuery, putRecruitInfos, getCompanies } from "./api";
import sets from "./component/set";
import edit from "./component/set";
import addModal from "./component/addModal";
import editScope from "./component/editScope";
import moment from "moment";

const curdMixin = new XqCurdMixin({
  FormJson,
  tableConfigKey: "table"
});

export default {
  components: {
    sets,
    edit,
    addModal,
    editScope
  },
  mixins: [curdMixin],
  data() {
    return {
      previewImage: "",
      previewVisible: false,
      logo: [],
      fileList: [],
      id: "",
      val: "",
      form: this.$form.createForm(this, {}),
      socCity: "",
      socCityName: "",
      mType: true,
      visible: false,
      visibleSet: false,
      visibleEdit: false,
      spinning: false,
      tableData: [],
      postName: "",
      total: 0,
      pageNo: 1,
      pageSize: 20,
      selectedListTempString: [],
      empMoneyReward: 0,
      addModalVisible: false,
      editScopeVisible: false,
      empRuleIsOpen: false,
      selectedList: []
    };
  },
  created() {
    this.onGetFindPostByQuery();
  },
  methods: {
    moment,
    async onGetFindPostByQuery() {
      try {
        this.spinning = true;
        const { data } = await getFindPostByQuery({
          "orders[0].property": "isEmp",
          "orders[0].desc": false,
          "orders[1].property": "gmtCreate",
          "orders[1].desc": true,
          isEmp: 1,
          postName: this.postName,
          pageNo: this.pageNo,
          pageSize: this.pageSize
        });
        this.tableData = data.entities;
        this.tableData.forEach(e => {
          if (e.empCompanyIds) e.empCompanyIds = JSON.parse(e.empCompanyIds);
        });
        this.total = data.entityCount;
        setTimeout(() => (this.spinning = false), 500);
      } catch (err) {
        console.log("error log --> ", err);
        setTimeout(() => (this.spinning = false), 500);
      }
    },
    onPageChange(page) {
      this.pageNo = page;
      this.onGetFindPostByQuery();
    },
    onPageSizeChange(current, pageSize) {
      this.pageNo = 1;
      this.pageSize = pageSize;
      this.onGetFindPostByQuery();
    },

    handleCity(e) {
      if (e.value.length > 0) {
        const value = e.value;
        const label = e.label;
        this.socCity = value[value.length - 1].toString();
        if (label.length && label.length === 3) {
          this.socCityName = label[0] + "/" + label[1] + "/" + label[2];
        } else if (label.length && label.length === 2) {
          this.socCityName = label[0] + "/" + label[1];
        } else if (label.length && label.length === 1) {
          this.socCityName = label[0];
        }
      } else {
        this.socCity = "";
        this.socCityName = "";
      }
      this.onGetFindPostByQuery();
    },
    upDate() {
      this.visible = false;
      this.onGetFindPostByQuery();
    },
    onSearch() {
      this.pageNo = 1;
      this.onGetFindPostByQuery();
    },
    upDateSelect(e) {
      this.selectedListTempString = e;
      this.visibleSet = true;
    },
    onEdit(e) {
      this.id = e.id;
      this.val = e.empRule;
      this.empRuleIsOpen = e.empRuleIsOpen;
      this.empMoneyReward = e.empMoneyReward;
      this.visibleEdit = true;
    },
    async onClose(id, isEmp) {
      try {
        await putRecruitInfos({
          id,
          isEmp: isEmp === 1 ? 2 : 1
        });
        this.onGetFindPostByQuery();
      } catch (err) {
        console.log("error log --> ", err);
      }
    },
    onEditScope(e) {
      this.id = e.id;
      if (e.empCompanyIds) this.selectedList = e.empCompanyIds;
      this.editScopeVisible = true;
    }
  }
};
</script>

<style lang="scss" scoped></style>
